<template>
	<div>
		<el-card shadow="hover">
			<el-form ref="searchForm" :inline="true" :model="searchForm">
				<el-form-item label="书名" prop="name">
					<el-input v-model="searchForm.name"></el-input>
				</el-form-item>
				<el-form-item label="作者" prop="author">
					<el-input v-model="searchForm.author"></el-input>
				</el-form-item>
				<el-form-item label="出版社" prop="press">
					<el-input v-model="searchForm.press"></el-input>
				</el-form-item>
				<el-form-item label="分类" prop="catename">
					<el-select v-model="searchForm.catename">
						<el-option
							v-for="item in catelist"
							:key="item.book_cate_id"
							:value="item.book_cate_name"
							:label="item.book_cate_name"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="状态" prop="on_shelf">
					<el-select v-model="searchForm.on_shelf">
						<el-option label="已上架" :value="1" />
						<el-option label="已下架" :value="2" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="search">搜索</el-button>
					<el-button @click="resetSearchForm">重置</el-button>
				</el-form-item>
			</el-form>
		</el-card>
		<el-table :data="bookslist" stripe style="width: 100%">
			<el-table-column prop="name" label="书名"></el-table-column>
			<el-table-column prop="author" label="作者"></el-table-column>
			<el-table-column prop="catename" label="分类"></el-table-column>
			<el-table-column prop="info" label="简介" width="240"></el-table-column>
			<el-table-column prop="press" label="出版社"></el-table-column>
			<el-table-column prop="publishdate" label="发布时间">
				<template slot-scope="scope">
					{{ scope.row.publishdate | formatDate }}
				</template>
			</el-table-column>
			<el-table-column prop="createtime" label="入库时间">
				<template slot-scope="scope">
					{{ scope.row.createtime | formatDate }}
				</template>
			</el-table-column>
			<el-table-column prop="on_shelf" label="状态">
				<template slot-scope="scope">
					{{ shelfStatus[+scope.row.on_shelf] }}
				</template>
			</el-table-column>
			<el-table-column label="操作" width="245">
				<template slot-scope="scope">
					<el-button
						v-if="scope.row.on_shelf == 2"
						size="mini"
						type="primary"
						@click="edit(scope.row, 'editDrawer')"
					>编辑
					</el-button
					>
					<el-button size="mini" type="primary" @click="changeShelf(scope.row)">
						{{ scope.row.on_shelf == 1 ? "下架" : "上架" }}
					</el-button>
<!--					TODO 待完成：借书-->
					<el-button hidden size="mini" type="primary" @click="borrow('borrowDrawer')">借书</el-button>
					<el-popconfirm
						title="确定删除吗？"
						@confirm="deleteBook(scope.row.id)"
					>
						<el-button
							v-if="scope.row.on_shelf == 2"
							size="mini"
							type="danger"
							slot="reference"
						>删除
						</el-button
						>
					</el-popconfirm>
				</template>
			</el-table-column>
		</el-table>

		<pagination
			:page-size="listParams.pagesize"
			:total="listParams.total"
			:current-page="listParams.pagenum"
			@size-change="sizeChange"
			@current-change="currentChange"
		/>

		<!-- 编辑图书 -->
		<el-drawer
			title="编辑图书"
			:visible.sync="editDrawer"
			direction="rtl"
			:destroy-on-close="true"
			@closed="drawerClose('editDrawer')"
		>
			<el-form
				ref="editForm"
				:rules="editFormRules"
				:model="editForm"
				label-width="80px"
			>
				<el-form-item label="图书名" prop="name">
					<el-input
						v-model="editForm.name"
						placeholder="请输入图书名"
					></el-input>
				</el-form-item>
				<el-form-item label="作者" prop="author">
					<el-input
						v-model="editForm.author"
						placeholder="请输入作者"
					></el-input>
				</el-form-item>
				<el-form-item label="分类" prop="cateid">
					<el-select v-model="editForm.cateid">
						<el-option
							v-for="item in catelist"
							:key="item.book_cate_id"
							:label="item.book_cate_name"
							:value="item.book_cate_id"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="出版社" prop="press">
					<el-input v-model="editForm.press"></el-input>
				</el-form-item>
				<el-form-item label="简介" prop="info">
					<el-input
						type="textarea"
						v-model="editForm.info"
						maxlength="100"
					    show-word-limit></el-input>
				</el-form-item>
				<el-form-item label="发布日期" prop="publishdate">
					<el-date-picker
						v-model="editForm.publishdate"
						type="date"
						placeholder="请选择发布日期"
					>
					</el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="confirmEdit">确认</el-button>
					<el-button @click="resetForm('editForm')">重置</el-button>
				</el-form-item>
			</el-form>
		</el-drawer>

		<!-- 借书 -->
		<el-drawer
			title="借书"
			:visible.sync="borrowDrawer"
			direction="rtl"
			:destroy-on-close="true"
			@closed="drawerClose('borrowDrawer')"
		>
			<el-form ref="borrowForm" :model="borrowForm" label-width="80px">
				<el-form-item label="借书人" prop="bUsername">
					<el-input v-model="borrowForm.b_username"></el-input>
				</el-form-item>
			</el-form>
		</el-drawer>
	</div>
</template>

<script>
import pagination from "@/components/pagination.vue";
export default {
	name: "bookslist",
	created () {
		this.getbookslist();
		this.getCateList();
	},
	  components: {
	    pagination,
	  },
	data () {
		return {
			catelist: [],
			bookslist: [],
			listParams: {
				pagesize: 10,
				pagenum: 1,
				total: 0,
			},
			searchForm: {
				name: '',
				author: '',
				catename: '',
				on_shelf: '',
				press: '',
				info: ''
			},
			editFormRules: {
				name: [
					{
						type: "string",
						required: true,
						message: "图书名不能为空",
						trigger: "blur",
					},
				],
				author: [
					{
						type: "string",
						required: true,
						message: "作者不能为空",
						trigger: "blur",
					},
				],
				cateid: [
					{
						type: "string",
						required: true,
						message: "分类不能为空",
						trigger: "blur",
					},
				],
				press: [
					{
						type: "string",
						required: true,
						message: "出版社不能为空",
						trigger: "blur",
					},
				],
				info: [
					{
						type: "string",
						required: true,
						message: "简介不能为空",
						trigger: "blur",
					},
				],
				publishdate: [
					{
						required: true,
						message: "发布时间不能为空",
						trigger: "blur",
					},
				],
			},
			editDrawer: false,
			borrowDrawer: false,
			editForm: {},
			borrowForm: {
				bUsername: '',

			},
			shelfStatus: {
				1: "已上架",
				2: "已下架",
			},
		};
	},
	methods: {
		async getbookslist () {
			const { data } = await this.http({
				method: "post",
				url: "/api/books/list",
				data: {
					...this.listParams,
					...this.searchForm
				},
			});
			if (data.errno !== 0) {
				return this.msg({
					type: "error",
					message: "获取图书列表失败",
				});
			}
			this.bookslist = data.data;
			this.listParams.total = data.total;
		},
		async getCateList () {
			const { data } = await this.http({
				method: "post",
				url: "/api/cate/listselect",
			});
			console.log(data)
			if (data.errno !== 0) {
				return this.msg({
					type: "error",
					message: "获取分类列表失败",
				});
			}
			this.catelist = data.data;
		},
		edit (data, drawer) {
			if (drawer === "editDrawer") {
				sessionStorage.setItem("editForm", JSON.stringify(data));
				this.editForm = { ...data };
			}
			this[drawer] = true;
		},
		drawerClose (drawer) {
			this[drawer] = false;
			if (drawer === 'editDrawer') {
				sessionStorage.removeItem("editForm");
			}
		},
		async changeShelf (row) {
			const { data } = await this.http({
				method: "post",
				url: "/admin/books/shelf",
				data: {
					on_shelf: row.on_shelf == 1 ? 2 : 1,
					id: row.id,
				},
			});
			if (data.errno !== 0) {
				return this.msg({
					type: "error",
					message: "操作失败",
				});
			}
			this.msg({
				type: "success",
				message: "操作成功",
				onClose: () => {
					this.getbookslist();
				},
			});
		},
		confirmEdit () {
			this.$refs['editForm'].validate(async valid => {
				if (!valid){
					return
				}
				const { data } = await this.http({
					method: "post",
					url: "/admin/books/update",
					data: this.editForm,
				});
				if (data.errno !== 0) {
					return this.msg({
						type: "error",
						message: "编辑失败",
					});
				}
				this.msg({
					type: "success",
					message: data.message,
					onClose: () => {
						this.editDrawer = false;
						this.getbookslist();
					},
				});
			})
		},
		resetForm () {
			this.editForm = JSON.parse(sessionStorage.getItem("editForm"));
		},
		async deleteBook (id) {
			const { data } = await this.http({
				method: "delete",
				url: "/api/books/delete/" + id,
			});
			if (data.errno !== 0) {
				return this.msg({
					type: "error",
					message: "删除图书失败",
				});
			}
			this.msg({
				type: "success",
				message: "删除图书成功",
				onClose: () => {
					this.getbookslist();
				},
			});
		},
		sizeChange (val) {
			this.listParams.pagesize = val;
			this.getbookslist();
		},
		currentChange (val) {
			this.listParams.pagenum = val;
			this.getbookslist();
		},
		borrow (drawer) {
			this[drawer] = true
		},
		search () {
			this.getbookslist()
		},
		resetSearchForm () {
			this.$refs['searchForm'].resetFields()
			this.getbookslist()
		},
	},
};
</script>

<style lang="less" scoped>
.el-pagination {
	margin-top: 20px;
}
</style>
